<template>
  <PureWhiteLayout>
    <template #content>
      <div class="ceshi">
        <el-button @click="openDialog">打开弹窗</el-button>
        <!-- 公共编辑弹窗 -->
        <CommonEditDialog @submit="editDialogFormSubmit" width="70%" :editForm="editDialogForm" submitBtnText="确定"
          :title="editDialogTitle" @handleClose="handleEditDialogClose" :visible.sync="editDialogVisible"
          :formInfo="userFormInfo">
        </CommonEditDialog>
      </div>
    </template>
  </PureWhiteLayout>
</template>

<script setup lang="ts">
import PureWhiteLayout from './components/Layout/PureWhiteLayout/index.vue';
import CommonEditDialog from './components/CommonEditDialog/index.vue';
import { FormInfo } from './types/index';
import { ref, reactive } from 'vue'
const editDialogForm = reactive({})
const editDialogTitle = ref("测试")
const editDialogVisible = ref(false)
const userFormInfo: FormInfo[] = [
  {
    span: 12,
    prop: 'nickName',
    label: '用户昵称',
    rules: [
      { required: true, message: '请输入用户昵称', trigger: 'change' },
    ],
    placeholder: '请输入用户昵称'
  },
]

const editDialogFormSubmit = (editForm) => {
  console.log(editForm)
}

const openDialog = () => {
  editDialogVisible.value = true
}

const handleEditDialogClose = () => {
  editDialogVisible.value = false
}


</script>

<style lang="scss">
#app {
  @include bfc;
}

@include b(content-container) {
  @include bfc;
  display: flex;

  @include b(left-box) {
    width: 280px;
    padding: 10px;

    @include useTheme {
      border: 1px solid getVar('borderColor');
      border-radius: getVar('gykBorderRadius');
      background-color: getVar('menuBackgroundColor');
    }

    @include bfc;
  }

  @include b(right-box) {
    margin-left: 10px;
    padding: 10px;
    flex: 1;
    @include useTheme {
      border: 1px solid getVar('borderColor');
      border-radius: getVar('gykBorderRadius');
      background-color: getVar('menuBackgroundColor');
    }
  }
}
</style>